<template>
  <Header class="index-JMUSj_0">
    <div class="index-1DPx9_0">
      <div :aria-label="address" @click="selectAddress" role="button" class="index-2S5Ah_0">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 31"
             class="index-okfdP_0">
          <path fill="#FFF" fill-rule="evenodd" d="M22.116
            22.601c-2.329 2.804-7.669 7.827-7.669
            7.827-.799.762-2.094.763-2.897-.008 0
            0-5.26-4.97-7.643-7.796C1.524 19.8 0
            16.89 0 13.194 0 5.908 5.82 0 13 0s13
            5.907 13 13.195c0 3.682-1.554 6.602-3.884
            9.406zM18 13a5 5 0 1 0-10 0 5 5 0 0 0 10 0z">
          </path>
        </svg>
        <span class="index-2uW_v_0">{{address}}</span>
        <svg xmlns="http://www.w3.org/2000/svg"
             viewBox="0 0 14 8" class="index-2iXz3_0">
          <path fill="#FFF" fill-rule="evenodd"
                d="M5.588 6.588c.78.78 2.04.784 2.824
                  0l5.176-5.176c.78-.78.517-1.412-.582-1.412H.994C-.107 0-.372.628.412 1.412l5.176 5.176z">
          </path>
        </svg>
      </div>
    </div>
  </Header>
</template>

<script>
  import {mapGetters} from 'vuex'

    export default {
      name: "home-header",
      computed:{
        ...mapGetters({
          address: 'getAddress'
        })
      },
      methods:{
        selectAddress(){
          this.$router.push("/address");
        }
      }
    }
</script>

<style scoped>

  element.style {
    font-size: 12px;
  }
  body, button, dd, dl, ol, ul {
    margin: 0;
    padding: 0;
  }
  .index-JMUSj_0 {
    padding: .266667rem .373333rem 0;
    padding: 2.666667vw 3.733333vw 0;
    background-image: -webkit-gradient(linear,left top,right top,from(#0af),to(#0085ff));
    background-image: -webkit-linear-gradient(left,#0af,#0085ff);
    background-image: linear-gradient(90deg,#0af,#0085ff);
    color: #fff;
  }

  .index-1DPx9_0 {
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    height: .92rem;
    height: 9.2vw;
  }
  .index-JMUSj_0 {
    padding: .266667rem .373333rem 0;
    padding: 2.666667vw 3.733333vw 0;
    background-image: -webkit-gradient(linear,left top,right top,from(#0af),to(#0085ff));
    background-image: -webkit-linear-gradient(left,#0af,#0085ff);
    background-image: linear-gradient(90deg,#0af,#0085ff);
    color: #fff;
  }
  .index-2S5Ah_0 {
    width: 60%;
    font-weight: 700;
  }
  .index-1DPx9_0, .index-2S5Ah_0 {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
  }
  .index-okfdP_0 {
    width: .346667rem;
    width: 3.466667vw;
    height: .413333rem;
    height: 4.133333vw;
    fill: #fff;
  }
  .index-2uW_v_0 {
    margin: 0 .133333rem;
    margin: 0 1.333333vw;
    font-size: .7rem;
    max-width: 80%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .index-2iXz3_0 {
    width: .186667rem;
    width: 1.866667vw;
    height: .093333rem;
    height: .933333vw;
    fill: #fff;
  }
</style>
